<template>
    <div style="width: 100%;height: 100%">
      <el-row>
        <el-steps :active="active" align-center style="margin-top: 50px">
          <el-step title="步骤 1" description="教师发布考勤"></el-step>
          <el-step title="步骤 2" description="学生人脸识别"></el-step>
          <el-step title="步骤 3" description="系统自动判断"></el-step>
        </el-steps>
      </el-row>
     <el-row style="margin-top: 20px;margin-left: 20px" type="flex" :gutter="20">
       <el-col :span="12" v-for="task in unCompleteTasks" :key="task.guid">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>考勤任务</span>
             <el-button style="float: right; padding: 3px 0" type="text" @click="startAttendance(task.guid,task)">开始考勤</el-button>
           </div>
           <div   class="text item">
             课程名: {{task.courseName}}
           </div>
           <div   class="text item">
            发布时间: {{task.createTime}}
           </div>
           <div   class="text item">
             发起人：  {{task.publishName}}
           </div>
           <div   class="text item">
             考勤开始时间： {{task.attendanceExpectStartTime}}
           </div>
           <div   class="text item">
             最迟结束时间： {{task.allowTimeDifference}}
           </div>
           <div  v-if="task.successFlag"  class="text item">
             考勤状态： {{task.successFlag?'已考勤':'缺勤'}}
           </div>
         </el-card>

       </el-col>

     </el-row>
      <el-dialog @close="closeVideo" :destroy-on-close="true"  width="30%" title="AI考勤" :visible.sync="showFace">
        <face-camera  @success="checkSuccess" ref="camera"></face-camera>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'StartCamera.vue',
    data(){
      return {
        active:1,
        showFace:false,
        value:new Date(),
        unCompleteTasks:[],
        currentId:'',
        currentRow:{}
      }
    },
    methods:{
      loadAttendances(){
        let g=this;
        g.$ajaxGet('/attendanceParent/getUnCompletedAttendances').then(res=>{
          g.unCompleteTasks=res.map(data=>{
            g.$set(data,'createTime',new Date(data.createTime).Format('yyyy年-MM月-dd日 hh时:mm分:ss秒'));
            g.$set(data,'attendanceExpectStartTime',new Date(data.attendanceExpectStartTime).Format('yyyy年-MM月-dd日 hh时:mm分:ss秒'));
            g.$set(data,'allowTimeDifference',new Date(data.allowTimeDifference).Format('yyyy年-MM月-dd日 hh时:mm分:ss秒'));
            g.$set(data,'successFlag',false);
            return data;
          })
        })
      },
      startAttendance(id,row){
        this.currentId=id;
        this.showFace=true;
        this.currentRow=row;
        let g=this;
        this.$nextTick(()=>{
          g.$refs.camera.openVideo();
        })
      },
      closeVideo(){
        this.$refs.camera.closeVideo();
      },
      checkSuccess(imgStr){
        let g=this;
        g.$ajaxPost(`/faceInformation/judgeFace?attendanceId=${g.currentId}`,{data:imgStr}).then(res=>{
          g.message({message:'打卡成功',type:'success'});
          g.$nextTick(()=>{
            g.$set(g.currentRow,'successFlag',true);
            g.showFace=false;
            g.active=2;
          })
        }).catch(e=>{
          g.$nextTick(()=>{
            g.$set(g.currentRow,'successFlag',false);
            g.showFace=false;
            g.active=1;
          })
        });

      }
    },
    created() {
      this.loadAttendances();
    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
